<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>个人中心</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/swiper.min.css">
    <style>
        html,
        body {
            width: 100%;
            min-height: 100%;
            background: #F3EFEE;
        }

        .aui-active .aui-bar-tab-label {
            color: #f5a51c
        }

        .login {
            height: 240px;
            background-image: -webkit-linear-gradient(0deg, #f5c674, #ed824c);
            /*background-image: url(../../image/personal_bkg.jpg);background-repeat: no-repeat; background-size: cover;*/
            position: relative;
        }

        .login .personal_logo {
            width: 4rem;
            height: 4rem;
            border-radius: 50%;
            margin: 0 auto 9px;
            /*position: absolute; top: 60px; left: 20px;*/
        }

        .login .userinfo {
            position: absolute;
            top: 60px;
            text-align: center;
            left: 0;
            right: 0;
        }

        .login .userinfo .title {
            font-size: 0.8rem;
            color: #fff;
        }
        /* 设置条目 */

        .item {
            height: 3rem;
            line-height: 3rem;
            padding-left: 0.7rem;
            background-color: #fff;
        }

        .item_ico {
            float: left;
            width: 2.3rem;
            padding: 0.7rem 0.7rem 0.7rem 0;
        }

        .item_arrow {
            float: right;
            width: 1.5rem;
            padding: 1rem 0.7rem 1rem 0;
        }

        .item span {
            font-size: 0.7rem;
        }

        [v-cloak] {
            display: none;
        }

        #tab1 .aui-active {
            color: #f23030;
            border-bottom: 2px solid #f23030;
        }

        .myshop_main_one {
            margin-bottom: 0.3rem;
            margin-top: 0;
            /*justify-content: inherit;*/
        }

        .aui-list-item-middle {
            padding-left: 0.75rem;
        }

        .aui-radio:checked {
            background-color: #f23030;
            border: solid 1px #f23030;
        }

        .aui-toast {
            width: 9.5rem;
            background: #999;
            opacity: 0.7;
            height: 4rem;
            min-height: 4rem;
            line-height: 4rem;
        }

        .aui-toast-content {
            color: #fff;
        }

        .collect_head {
            position: fixed;
            left: 0;
            top: 0;
            width: 100vw;
            background-color: #fff;
            padding: 0.5rem;
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-orient: vertical;
            box-orient: vertical;
            -webkit-box-pack: justify;
            -webkit-justify-content: space-between;
            justify-content: space-between;
            -webkit-box-align: start;
            -webkit-align-items: center;
            align-items: center;
            z-index: 9;
        }

        .collect_head img {
            display: inline-block;
        }

        .collect_head span {
            font-size: 0.8rem;
            line-height: 0.8rem;
        }

        .dowm {
            width: 0.5rem;
            margin-left: 0.2rem;
            vertical-align: middle;
        }

        .mor {
            width: 0.6rem;
            margin-right: 0.2rem;
        }

        #app {
            padding-top: 2.5rem;
        }

        .near_sort_list {
            width: 100%;
            background: #fff;
            max-height: 0;
            overflow: hidden;
            transition: all 0.4s ease;
            -webkit-transition: all 0.4s ease;
            position: absolute;
            ;
            z-index: 9;
        }

        .near_sort_list li {
            border-bottom: 1px solid #e8e8e8;
            padding: 0.5rem 0.75rem;
            font-size: 0.6rem;
        }

        #app.sort .near_sort_list {
            max-height: 500px;
        }

        .myshop_mainCon {
            padding: 0 0.25rem;
        }

        .myshop_margin div {
            display: inline-block;
        }

        .myshop_marginImg img {
            width: 0.8rem;
        }

        .myshop_mainCon {
            min-height: calc(100vh - 2.5rem);
        }

        .myshop_content_one {
            width: 49.5%;
            margin-right: 1%
        }

        .myshop_main_one .myshop_content_one:last-of-type {
            margin-right: 0;
        }

        .myshop_content_one_text_three {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            /*line-height: 0.8rem;
        height: 1.6rem;*/
        }

        .myshop_content_one_money {
            line-height: 1.1;
        }

        .myshop_content_one_text_one {
            margin-top: 0;
            margin-bottom: 0.3rem;
        }

        #tab1 {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            z-index: 9;
        }

        .myshop_content_one_img {
            width: 100%;
            height: auto;
        }

        .swiper-container {
            width: 100%;
            height: 2.2rem;
            position: relative;
            overflow: hidden;
            background: #fff;
            border-bottom: none!important;
        }

        .swiper-slide {
            text-align: center;
            font-size: 0.6rem;
            line-height: 2.2rem;
            color: #000;
            font-size: 0.7rem;
        }

        .swiper-slide-active {
            border-bottom: none!important;
        }

        .list_title.active{
          /*border-bottom: 1px solid red!important;*/
          font-weight: bold;
        }





        .swiper-container {
            width: 100%;
            height: 2.2rem;
            position: relative;
            overflow: hidden;
            background: #fff;
            /*border-bottom: none!important;*/
            border-bottom: 1px solid #999999;
            z-index: 999;
        }

        .swiper-container .swiper-slide {
            text-align: center;
            font-size: 0.6rem;
            line-height: 2.2rem;
            color: #000;
            font-size: 0.7rem;
        }

        .swiper-container .swiper-slide-active {
            border-bottom: none!important;
        }

        .swiper-container span {
            display: initial;
            padding: 0.1rem 0.2rem;
            line-height: 1;
            color: #999999;
            font-weight: 600;
        }

        .swiper-container .list_title.active span {
            background: #f23030;
            display: initial;
            border-radius: 1rem;
            padding: 0.1rem 0.2rem;
            line-height: 1;
            color: #FFF;
            font-weight: 600;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak style="box-sizing:border-box;padding-top:0.3rem;">
        <div id="tab1">
            <!-- <div class="aui-tab-item aui-active">全部</div> -->
            <!-- <div v-for="fl in fl_info" :data-id="fl.cate_id" class="aui-tab-item">{{fl.classname}}</div> -->

            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide list_title" v-for="(fl,fl_index) in fl_info" @click="change_state(fl_index,fl.cate_id)" :class="[fl_index==0?'active':'']" ><span>{{fl.classname}}</span></div>
                </div>
            </div>


        </div>

        <div id="tab1-con" style="margin-top: 2.3rem;">
            <div id="tab1-con1" class="list_box">
                <div class="myshop_mainCon aui-refresh-content">

                    <div class="myshop_main_one" style="justify-content:space-between;" v-for='data in list'>
                        <div class="myshop_content_one" v-for="item in data" @click="openSP(item.goods_id,item.goods_name)">
                            <div class="myshop_content_one_img" :style="'background:url('+item.logo_pic+') center center/cover no-repeat;'"></div>
                            <div class="myshop_content_one_text_three myshop_margin">{{item.goods_name}}</div>
                            <div class="myshop_content_one_money myshop_margin">￥{{item.price}}</div>
                            <div class="myshop_content_one_text_one myshop_margin">
                                <div class="myshop_content_one_text_two">预计收益: </div>
                                <div class="myshop_content_one_num">{{item.commission}}</div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript" src="../../script/swiper.min.js"></script>
<script type="text/javascript" src="../../script/aui-toast.js"></script>
<script type="text/javascript">
    // apiready = function() {
    //     api.parseTapmode();
    // };


    apiready = function(url) {
        var app = new Vue({
            el: '#app',
            data: { //所有需要用到的数据
                token: '',
                page: 1,
                totalpage: 1,
                list: [],
                cateId: '',
                user_id: '',
                fl_info: []
            },
            created: function() { //创建好vue对象后执行，可处理数据
                var $_this = this;
                $_this.token = $api.getStorage('token') || ''
                $_this.user_id = api.pageParam.id || ''
                $_this.gx()

                var scroll = new auiScroll({
                    listen: true, //是否监听滚动高度，开启后将实时返回滚动高度
                    distance: 40 //判断到达底部的距离，isToBottom为true
                }, function(ret) {
                    if (ret.isToBottom) {
                        $_this.page++
                            if ($_this.page > $_this.totalpage) {
                                $_this.page = $_this.totalpage
                                return
                            }
                        if ($_this.user_id) {
                            api.ajax({
                                url: window.Url.Freeucenter_othersShop,
                                method: 'post',
                                data: {
                                    values: {
                                        token: $_this.token,
                                        cateId: $_this.cateId,
                                        user_id: $_this.user_id,
                                        page: $_this.page
                                    }
                                },
                                timeout: 300,
                            }, function(ret, err) {
                                if (ret) {
                                    //  api.alert({ msg: JSON.stringify(ret) });
                                    if (ret.re == 1) {
                                        $_this.list = $_this.list.concat($_this.group(ret.data.list, 2))
                                        $_this.$nextTick(function() {
                                            $('.myshop_content_one_img').height($('.myshop_content_one_img').width())
                                        })
                                    }

                                } else {
                                    api.alert({
                                        msg: JSON.stringify(err)
                                    });
                                }
                            })
                        } else {
                            api.ajax({
                                url: window.Url.Freeucenter_myShop,
                                method: 'post',
                                data: {
                                    values: {
                                        token: $_this.token,
                                        cateId: $_this.cateId,
                                        page: $_this.page
                                    }
                                },
                                timeout: 300,
                            }, function(ret, err) {
                                if (ret) {
                                    //  api.alert({ msg: JSON.stringify(ret) });
                                    if (ret.re == 1) {
                                        $_this.list = $_this.list.concat($_this.group(ret.data.list, 2))
                                        $_this.$nextTick(function() {
                                            $('.myshop_content_one_img').height($('.myshop_content_one_img').width())
                                        })
                                    }

                                } else {
                                    api.alert({
                                        msg: JSON.stringify(err)
                                    });
                                }
                            })
                        }

                    }

                })
            },
            mounted: function() { //页面渲染完成后执行，不包括需要请求的数据
                // 如在这里开始渲染地图!!! initMap()
                var $_this = this;
                $_this.setRefresh();
                $_this.get_fx();

            },
            methods: {
                // 点击分类标题
                change_state:function(fl_index,fl_id){
                  var $_this = this;
                  // alert(fl_index)
                  $('.list_title').removeClass('active');
                  $('.list_title').eq(fl_index).addClass('active')

                  $_this.cateId = fl_id;
                  $_this.list = [];
                  $_this.gx();
                },
                gx: function() {
                    var $_this = this;
                    $_this.page = 1;
                    if ($_this.user_id) {
                        api.ajax({
                            url: window.Url.Freeucenter_othersShop,
                            method: 'post',
                            data: {
                                values: {
                                    token: $_this.token,
                                    cateId: $_this.cateId,
                                    user_id: $_this.user_id,
                                    page: $_this.page
                                }
                            }
                        }, function(ret, err) {
                            if (ret) {
                                if (ret.re != 1) {
                                    api.toast({
                                        msg: ret.info,
                                        duration: 2000,
                                        location: 'bottom'
                                    });
                                } else {
                                    $_this.list = $_this.group(ret.data.list, 2) || ''
                                    $_this.totalpage = ret.sum_page
                                    $_this.$nextTick(function() {
                                        $('.myshop_content_one_img').height($('.myshop_content_one_img').width())
                                    })


                                    api.sendEvent({
                                        name: 'Freeucenter_othersShop_header',
                                        extra: {
                                            username: ret.data.username,
                                            head_img: ret.data.head_img
                                        }
                                    });
                                }

                            } else {
                                api.alert({
                                    msg: JSON.stringify(err)
                                });
                            }
                        })
                    } else {
                        api.ajax({
                            url: window.Url.Freeucenter_myShop,
                            method: 'post',
                            data: {
                                values: {
                                    token: $_this.token,
                                    cateId: $_this.cateId,
                                    page: $_this.page
                                }
                            }
                        }, function(ret, err) {
                            if (ret) {
                                if (ret.re != 1) {
                                    api.toast({
                                        msg: ret.info,
                                        duration: 2000,
                                        location: 'bottom'
                                    });
                                } else {
                                    $_this.list = $_this.group(ret.data.list, 2) || ''
                                    $_this.totalpage = ret.sum_page;
                                    $_this.$nextTick(function() {
                                        $('.myshop_content_one_img').height($('.myshop_content_one_img').width())
                                        setTimeout(function() {
                                            var swiper = new Swiper('.swiper-container', {
                                                slidesPerView: 5,
                                                spaceBetween: 10,
                                                freeMode : true
                                            });
                                        }, 100)

                                    })
                                }
                                // console.log(JSON.stringify(ret));
                            } else {
                                api.alert({
                                    msg: JSON.stringify(err)
                                });
                            }
                        })
                    }
                },
                setRefresh: function() {
                    var $_this = this;
                    var pullRefresh = new auiPullToRefresh({
                        container: document.querySelector('.aui-refresh-content'),
                        triggerDistance: 100
                    }, function(ret) {
                        if (ret.status == "success") {
                            $_this.page = 1;
                            $_this.gx()
                            setTimeout(function() {
                                pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
                            }, 500)
                        }
                    })
                },
                group: function(data, num) {
                    var len = 0
                    var arr = []
                    var arr2 = []
                    num = num || 4
                    for (var key in data) {
                        len++
                        arr.push(data[key])
                    }
                    for (var i = 0; i < len; i += num) {
                        arr2.push(arr.slice(i, i + num));
                    }
                    return arr2
                },
                openSP: function(id, name) {
                    api.openWin({
                        name: 'commodity',
                        url: './../one_frame/commodity.html',
                        pageParam: {
                            name: name,
                            id: id
                        }
                    });
                },

                // 获取分类
                get_fx: function() {
                    var $_this = this;
                    api.ajax({
                        url: window.Url.Freegoodscate_index,
                        method: 'post'
                    }, function(ret, err) {
                        if (ret) {
                            // console.log("获取到的分类----"+ JSON.stringify( ret ) );
                            if (ret.re == 1) {
                                $_this.fl_info = ret.data.catelist;
                                // console.log(JSON.stringify($_this.fl_info))
                            }

                        } else {
                            alert(JSON.stringify(err));
                        }
                    });

                }
            }
        });
    }
</script>

</html>
